<template>
  <MrCustom bg-color="bg-gradual-blue " is-back>
    <template #backText>
      返回
    </template>
  </MrCustom>
  <view v-if="appointmentInfo&&treatInfo" class="bg-white full-height">
    <view class="cu-bar">
      <view class="action sub-title">
        <text class="text-xl text-bold text-green">诊断结果</text>
        <text class="bg-green"></text>
      </view>
    </view>

    <view class="table">
      <block>
        <view class="flex-sub">
          <view class="table-tr text-bold">
            <view class="table-th">过程</view>
            <view class="table-th">结果</view>
          </view>
          <view v-if="appointmentInfo.type===1">
            <view class="table-tr solid padding" v-for="(item,index) in maintainObjectList" :key="index">
              <view class="table-th text-xl">{{ item.label }}</view>
              <view class="table-th text-xl" v-if="item.label==='导管外露长度'">
                {{ treatInfo[item.value] }}cm
              </view>

              <view v-else class="table-th text-xl">
                {{ treatInfo[item.value] }}
              </view>
            </view>
          </view>
          <view v-if="appointmentInfo.type===2">
            <view class="table-tr solid padding" v-for="(item,index) in catheterObjectList" :key="index">
              <view class="table-th text-xl">{{ item.label }}</view>
              <view class="table-th text-xl"
                    v-if="item.label==='置管暴露长度'||item.label==='导管长度'||item.label==='置管插入长度'">
                {{ treatInfo[item.value] }}cm
              </view>
              <view v-else class="table-th text-xl">
                {{ treatInfo[item.value] }}
              </view>
            </view>
          </view>
          <view v-if="appointmentInfo.type===3">
            <view class="table-tr solid padding" v-for="(item,index) in extubationObjectList" :key="index">
              <view class="table-th text-xl">{{ item.label }}</view>
              <view class="table-th text-xl" v-if="item.label==='留置天数'">
                {{ treatInfo[item.value] }}天
              </view>
              <view v-else class="table-th text-xl">
                {{ treatInfo[item.value] }}
              </view>
            </view>
          </view>
        </view>
      </block>
    </view>
    <view class="cu-bar">
      <view class="action sub-title">
        <text class="text-xl text-bold text-green">诊断过程图</text>
        <text class="bg-green"></text>
      </view>
    </view>
    <view class="grid col-2 grid-square flex-sub">
      <view class="bg-img" v-for="(item,index) in treatInfo.images" :key="index" @tap="viewImage"
            :data-url="'http://127.0.0.1:82/chat'+treatInfo.images[index]">
        <image :src="'http://127.0.0.1:82/chat'+treatInfo.images[index]" mode="aspectFill"></image>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {onLoad} from "@dcloudio/uni-app";
import {ref} from "vue";
import api from "@/api";
import MrCustom from "@/components/common/MrCustom.vue";

const appointmentInfo = ref()
const treatInfo = ref()
const maintainObjectList = ref([
  {
    label: '管路是否通畅',
    value: 'pipelineUnobstructed',
  },
  {
    label: '是否更换敷料',
    value: 'changeDressing',
  },
  {
    label: '是否更换接头',
    value: 'replaceConnector',
  },
  {
    label: '有无阻力',
    value: 'resistance',
  },
  {
    label: '有无并发症',
    value: 'companion',
  },
  {
    label: '处理方法',
    value: 'treatmentProcess',
  },
  {
    label: '是否有回血',
    value: 'bloodReturn',
  },
  {
    label: '导管外露长度',
    value: 'catheterExposedLength',
  },

])
const catheterObjectList = ref([
  {
    label: '疾病',
    value: 'disease',
  },
  {
    label: '是否为首次置管',
    value: 'firstCatheter',
  },
  {
    label: '置管时机',
    value: 'catheterOpportunity',
  },
  {
    label: '导管品牌',
    value: 'catheterBand',
  },
  {
    label: '导管规格',
    value: 'catheterSpecification',
  },
  {
    label: '置管模式',
    value: 'catheterModel',
  },
  {
    label: '导管批号',
    value: 'catheterBatchNum',
  },
  {
    label: '导管长度',
    value: 'catheterLength',
  },
  {
    label: '穿孔方法',
    value: 'punctureMethod',
  },
  {
    label: '置管部位',
    value: 'catheterSite',
  },
  {
    label: '置管手臂',
    value: 'catheterArm',
  },
  {
    label: '置管静脉',
    value: 'catheterVein',
  },
  {
    label: '置管尖端位置',
    value: 'catheterTipPosition',
  },
  {
    label: '置管插入长度',
    value: 'catheterInsertionLength',
  },
  {
    label: '置管暴露长度',
    value: 'catheterExposedLength',
  },
  {
    label: '臂围',
    value: 'armCircumference',
  },
  {
    label: '化疗次数',
    value: 'chemotherapyNum',
  },
])
const extubationObjectList = ref([
  {
    label: '留置天数',
    value: 'indwellingTime',
  },
  {
    label: '导管末端是否完整',
    value: 'endIntact',
  },
  {
    label: '拔管是否顺利',
    value: 'processSmooth',
  },
])

const viewImage = (e: any) => {
  let tmp = JSON.parse(JSON.stringify(treatInfo.value.images))
  Object.keys(tmp).forEach(key => {
    tmp[key] = 'http://127.0.0.1:82/chat' + tmp[key]
  })
  uni.previewImage({
    urls: tmp,
    current: e.currentTarget.dataset.url
  });
}

onLoad((option) => {
  appointmentInfo.value = JSON.parse(decodeURIComponent(option.appointmentInfo))
  getTreatInfo(appointmentInfo.value.treatId, appointmentInfo.value.type)
})

const getTreatInfo = (treatId: any, type: any) => {
  api.treat.queryByIdType({
    id: treatId,
    type: type,
  }).then(res => {
    if (res && res.data.code === 0 && res.data.data) {
      treatInfo.value = res.data.data;
      treatInfo.value.images = JSON.parse(treatInfo.value.images)
    }
  })
}


</script>

<style scoped>
.table {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.table-tr {
  display: flex;
  justify-content: space-around;
  text-align: center;
  flex-direction: row;
  align-items: center;
  background-color: #fff;
  width: 100%;
  padding: 20 rpx;
}

.table-th {
  flex: 1;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
}

</style>